<template>
  <UserLayout :active-index="'2'" :active-menu="'tenant-center'">
    <div class="maintenance-results-content">
      <div class="results-header">
        <el-button type="primary" @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回租客中心
        </el-button>
        <h2>维修申请结果</h2>
        <p>查看您的维修申请处理结果</p>
      </div>

      <!-- 维修结果列表 -->
      <div class="results-list">
        <el-table :data="maintenanceResults" style="width: 100%">
          <el-table-column prop="id" label="申请编号" width="120"></el-table-column>
          <el-table-column prop="houseInfo" label="房源信息" width="200"></el-table-column>
          <el-table-column prop="faultType" label="故障类型" width="120">
            <template #default="scope">
              <el-tag :type="getFaultTypeTag(scope.row.faultType)">
                {{ getFaultTypeText(scope.row.faultType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="urgency" label="紧急程度" width="100">
            <template #default="scope">
              <el-tag :type="getUrgencyType(scope.row.urgency)">
                {{ getUrgencyText(scope.row.urgency) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="处理状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" width="150"></el-table-column>
          <el-table-column prop="processTime" label="处理时间" width="150"></el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 维修申请详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="维修申请详情" width="600px">
      <div v-if="selectedResult" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ selectedResult.id }}</el-descriptions-item>
          <el-descriptions-item label="房源信息">{{ selectedResult.houseInfo }}</el-descriptions-item>
          <el-descriptions-item label="故障类型">
            <el-tag :type="getFaultTypeTag(selectedResult.faultType)">
              {{ getFaultTypeText(selectedResult.faultType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="紧急程度">
            <el-tag :type="getUrgencyType(selectedResult.urgency)">
              {{ getUrgencyText(selectedResult.urgency) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ selectedResult.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="处理时间">{{ selectedResult.processTime }}</el-descriptions-item>
          <el-descriptions-item label="处理状态" :span="2">
            <el-tag :type="getStatusType(selectedResult.status)">
              {{ getStatusText(selectedResult.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="2">{{ selectedResult.description }}</el-descriptions-item>
          <el-descriptions-item label="处理结果" :span="2">{{ selectedResult.result || '暂无处理结果' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </UserLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import UserLayout from '@/components/layout/UserLayout.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()

// 返回租客中心
const goBack = () => {
  router.push('/rental/tenant')
}

// 数据
const dialogVisible = ref(false)
const selectedResult = ref(null)

// 模拟维修结果数据
const maintenanceResults = ref([
  {
    id: 'MR001',
    houseInfo: '北京市朝阳区三里屯SOHO 2号楼1501室',
    faultType: 'water_electricity',
    urgency: 'high',
    status: 'completed',
    applyTime: '2025-06-01 10:30:00',
    processTime: '2025-06-02 15:20:00',
    description: '卫生间水龙头漏水严重',
    result: '已更换新的水龙头，问题解决'
  },
  {
    id: 'MR002',
    houseInfo: '北京市海淀区中关村大街1号院3号楼802室',
    faultType: 'door_window',
    urgency: 'medium',
    status: 'processing',
    applyTime: '2025-06-03 14:20:00',
    processTime: '2025-06-04 09:15:00',
    description: '卧室门锁损坏，无法正常开关',
    result: ''
  },
  {
    id: 'MR003',
    houseInfo: '北京市西城区金融街5号院1号楼1203室',
    faultType: 'air_conditioner',
    urgency: 'low',
    status: 'pending',
    applyTime: '2025-06-05 16:45:00',
    processTime: '',
    description: '空调制冷效果不佳',
    result: ''
  }
])

// 查看详情
const viewDetails = (result) => {
  selectedResult.value = result
  dialogVisible.value = true
}

// 获取故障类型标签
const getFaultTypeTag = (type) => {
  const typeMap = {
    'water_electricity': 'danger',
    'door_window': 'warning',
    'furniture': 'info',
    'air_conditioner': 'primary',
    'internet': 'success',
    'other': 'default'
  }
  return typeMap[type] || 'default'
}

// 获取故障类型文本
const getFaultTypeText = (type) => {
  const typeMap = {
    'water_electricity': '水电故障',
    'door_window': '门窗故障',
    'furniture': '家具损坏',
    'air_conditioner': '空调故障',
    'internet': '网络故障',
    'other': '其他'
  }
  return typeMap[type] || '未知'
}

// 获取紧急程度类型
const getUrgencyType = (urgency) => {
  const urgencyMap = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger'
  }
  return urgencyMap[urgency] || 'info'
}

// 获取紧急程度文本
const getUrgencyText = (urgency) => {
  const urgencyMap = {
    'low': '一般',
    'medium': '紧急',
    'high': '非常紧急'
  }
  return urgencyMap[urgency] || '一般'
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'pending': 'info',
    'processing': 'warning',
    'completed': 'success',
    'rejected': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'rejected': '已拒绝'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.maintenance-results-content {
  padding: 20px;
}

.results-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.results-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

.back-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.results-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.detail-content {
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .maintenance-results-content {
    padding: 15px;
  }
  
  .results-header h2 {
    font-size: 24px;
  }
  
  .back-btn {
    position: static;
    margin-bottom: 20px;
  }
}
</style>
